import React, {FC, useState} from "react";
import styles from './common.module.scss'
import QuestionCard from "../../components/QuestionCard";
import {useTitle} from "ahooks";
import {Empty, Pagination, Spin, Typography} from "antd";
import UseLoadQuestionListData from "../../hooks/useLoadQuestionListData";
import ListSearch from "../../components/ListSearch";
import ListPage from "../../components/ListPage";

const {Title} = Typography
// const rawQuestionList = [
//
//     {_id: 2, title: '问卷2', isPublished: false, isStar: true, answerCount: 10, createAt: '3月11日 12:30'},
//     {_id: 3, title: '问卷3', isPublished: true, isStar: true, answerCount: 6, createAt: '3月14日 13:30'}
// ]
const Star: FC = () => {
    // useTitle('星标问卷')
    // const [questionList, setQuestionList] = useState(rawQuestionList)
    const {data = {}, loading} = UseLoadQuestionListData({isStar: true});
    const {list = [], total = 0} = data
    return (
        <div>
            <div className={styles.header}>
                <div className={styles.left}>
                    <Title level={3}>星标问卷</Title>
                </div>
                <div className={styles.right}>
                    <ListSearch></ListSearch>
                </div>
            </div>
            <div className={styles.content}>

                {loading && (<div style={{textAlign: 'center'}}><Spin></Spin></div>)}
                {!loading && list.length === 0 && <Empty description={"暂无数据"}></Empty>}
                {list.length > 0 && list.map((q: any) => {
                    const {_id} = q
                    return <QuestionCard key={_id} {...q}/>
                })
                }
            </div>
            <div className={styles.footer}>
                <ListPage total={total}></ListPage>
            </div>
        </div>
    )
}

export default Star